import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/demo",
      name: "demo",
      redirect: "/demo/first",
      component: () => import('@/views/demoView.vue'),
      children: [
        {
          path: "/demo/first",
          name: "first",
          component: () => import("@/components/demo/demo1.vue"),
        },
        {
          path: "/demo/second",
          name: "second",
          component: () => import("@/components/demo/demo2.vue"),
        },
        {
          path: "/demo/third",
          name: "third",
          component: () => import("@/components/demo/demo3.vue"),
        },
        {
          path: "/demo/fouth",
          name: "fouth",
          component: () => import("@/components/demo/demo4.vue"),
        },
        {
          path: "/demo/fifth",
          name: "fifth",
          component: () => import("@/components/demo/demo5.vue"),
        },
        {
          path: "/demo/sixth",
          name: "sixth",
          component: () => import("@/components/demo/demo6.vue"),
        },
        {
          path: "/demo/seventh",
          name: "seventh",
          component: () => import("@/components/demo/demo7.vue"),
        },
        {
          path: "/demo/eighth",
          name: "eighth",
          component: () => import("@/components/demo/demo8.vue"),
        },
        {
          path: "/demo/ninth",
          name: "ninth",
          component: () => import("@/components/demo/demo9.vue"),
        },
        {
          path: "/demo/tenth",
          name: "tenth",
          component: () => import("@/components/demo/demo10.vue"),
        },
        {
          path: "/demo/eleventh",
          name: "eleventh",
          component: () => import("@/components/demo/demo11.vue"),
        },
        {
          path: "/demo/twelfth",
          name: "twelfth",
          component: () => import("@/components/demo/demo12.vue"),
        },
        {
          path: "/demo/thirteenth",
          name: "thirteenth",
          component: () => import("@/components/demo/demo13.vue"),
        },
        {
          path: "/demo/fourteenth",
          name: "fourteenth",
          component: () => import("@/components/demo/demo14.vue"),
        },
        {
          path: "/demo/fiveteenth",
          name: "fiveteenth",
          component: () => import("@/components/demo/demo15.vue"),
        },
        {
          path: "/demo/sixteenth",
          name: "sixteenth",
          component: () => import("@/components/demo/demo16.vue"),
        },
        {
          path: "/demo/seventeenth",
          name: "seventeenth",
          component: () => import("@/components/demo/demo17.vue"),
        },
        {
          path: "/demo/eighteenth",
          name: "eighteenth",
          component: () => import("@/components/demo/demo18.vue"),
        },
        {
          path: "/demo/nineteenth",
          name: "nineteenth",
          component: () => import("@/components/demo/demo19.vue"),
        },
        {
          path: "/demo/twentieth",
          name: "twentieth",
          component: () => import("@/components/demo/demo20.vue"),
        },
      ],
    },
    
    {
      path: "/request",
      name: "request",
      component: ()=>import("@/views/RequestView.vue"),
    },
    {
      path: "/pinia",
      name: "pinia",
      component: ()=>import("@/views/PiniaView.vue"),
    },
    {
      path: "/moment",
      name: "moment",
      component: ()=>import("@/views/MomentView.vue"),
    },
    {
      path: "/animate",
      name: "animate",
      component: ()=>import("@/views/AnimateView.vue"),
    },
    {
      path: "/:path(.*)",
      name: "404",
      component: ()=>import("@/views/404.vue"),
    },
  ],
});

// router.beforeEach((to,from,next)=>{
//   console.log('-------first enter route start-------');
//   console.log(to);
//   console.log(from);
//   console.log('-------first enter route end-------');
//   next();
// })

export default router;
